<template>
	<view>
		<view class="list-item">
			<view class="list-row">
				<view class="list-row-label">案件编号</view>
				<view class="list-row-content">{{selectedCase.caseCode}}</view>
			</view>
			<view class="list-row">
				<view class="list-row-label">问题来源</view>
				<view class="list-row-content">{{rptChannelName}}</view>
			</view>
			<view class="list-row">
				<view class="list-row-label">案件级别</view>
				<view class="list-row-content">{{caseGradeName}}</view>
			</view>
			<view class="list-row">
				<view class="list-row-label">案件类型</view>
				<view class="list-row-content">{{selectedCase.casetypename||selectedCase.caseTypeName}}</view>
			</view>
			<view class="list-row">
				<view class="list-row-label">案件归属</view>
				<view class="list-row-content">{{caseBelongName}}</view>
			</view>
			<view class="list-row">
				<view class="list-row-label">所属区域</view>
				<view class="list-row-content">
					{{selectedCase.regionName+"-"+selectedCase.streetName+"-"+selectedCase.communityName}}
				</view>
			</view>
			<view class="list-row">
				<view class="list-row-label">问题描述</view>
				<view class="list-row-content" style="white-space: normal;">{{selectedCase.caseDesc}}</view>
			</view>
			<view class="list-row">
				<view class="list-row-label">地址描述</view>
				<view class="list-row-content" style="white-space: normal;">{{selectedCase.casePosDesc}}</view>
			</view>
			<view class="list-row" v-if="selectedCase.currStatusEndDate">
				<view class="list-row-label">截止时间</view>
				<view class="list-row-content" style="white-space: normal;">{{selectedCase.currStatusEndDate}}</view>
			</view>
			<view class="list-row">
				<view class="list-row-label">上报人</view>
				<view class="list-row-content">{{selectedCase.rptUserName}}</view>
			</view>
			<view class="list-row">
				<view class="list-row-label">上报时间</view>
				<view class="list-row-content">{{selectedCase.rptTime}}</view>
			</view>
			<view class="list-row">
				<view class="list-row-label">联系电话</view>
				<view class="list-row-content">{{selectedCase.rptPhone}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getDicts } from "@/api/system/dict/data";
	import {listOrg} from "@/api/system/org";
	export default {
		name:"case-detail",
		props:{
			selectedCase:{
				type:Object
			}
		},
		data() {
			return {
				sourceOptions:[],
				levelOptions:[],
				rptChannelName:"",
				caseGradeName:"",
				caseBelongName:""
			};
		},
		mounted() {
			//案件级别
			getDicts("case_level").then(response => {
				// console.log(JSON.stringify(response));
				this.levelOptions = response.data;
				this.$nextTick(() => {
					this.levelOptions.forEach(opt => {
						if(opt.dictValue == this.selectedCase.caseGrade){
							this.caseGradeName = opt.dictLabel;
						}
					})
				});
			});
			//问题来源
			getDicts("case_source").then(response => {
				// console.log(JSON.stringify(response));
				this.sourceOptions = response.data;
				this.$nextTick(() => {
					this.sourceOptions.forEach(opt => {
						if(opt.dictValue == this.selectedCase.rptChannelId){
							this.rptChannelName = opt.dictLabel;
						}
					})
				})
			});
			this.initCaseBelong();
		},
		methods:{
			initCaseBelong(){
				listOrg({type:6}).then(res => {
					if(res.data){
						let cb = res.data.find(item=>item.code===this.selectedCase.caseBelong);
						if(cb){
							this.caseBelongName = cb.displayName;
						}
					}
				});
			},
		}
	}
</script>

<style>
	.list-item{
		padding: 16px;
		border-bottom: 1px solid #F1F1F1;
	}
	.list-row{
		display: flex;
		padding-bottom: 10px;
	}
	.list-row-label{
		font-family: MicrosoftYaHei;
		font-size: 14px;
		font-weight: normal;
		line-height: 17px;
		letter-spacing: 0px;
		color: #9DA0AA;
		width: 25%;
	}
	.list-row-content{
		font-family: MicrosoftYaHei;
		font-size: 14px;
		font-weight: normal;
		line-height: 17px;
		letter-spacing: 0px;
		width: 75%;
		color: #353B50;
		white-space:nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>